import {uSelectWebDevReportConf} from '@/api/alarm'
import {uSelectUserDevList} from '@/api/public'
import {uSelectMyAllDevStandRange} from '@/api/standard'
import {CFormModal, ChangeVisible} from '@/components/modal'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnNormalP} from '@/components/text'
import {getUserId} from '@/libs/auth'
import {AlarmConfigMsgCard} from './components/alarmConfigMsgCard'

export default defineComponent({
  name: 'alarmConfig',
  setup(props, ctx) {
    const state = reactive<{
      standardList: Standard.StandardData[]
      spinning: boolean
      devList: Alarm.DevConfigData[]
    }>({
      standardList: [],
      spinning: false,
      devList: []
    })

    function getStandardList() {
      // let userId = getUserId()
      // if (!userId) return
      // state.spinning = true
      // uSelectMyAllDevStandRange({ userId: userId }).then(res => {
      //   state.standardList = res.data
      //   state.spinning = false
      // }).catch(err => {
      //   state.spinning = false
      // })
    }

    function getDevsConfigList() {
      const userId = getUserId()
      if (!userId) return
      state.spinning = true
      uSelectWebDevReportConf({userId})
        .then(res => {
          state.devList = res.data
          state.spinning = false
        })
        .catch(err => {})
    }
    onMounted(() => {
      getDevsConfigList()
    })

    return () => (
      <div class='mb-24'>
        <CnBoldP class='mt-11 text-20'>报警设置</CnBoldP>

        <CnNormalP class='mt-6 mb-8 text-4xText'>
          设置您的报警时段和频率，设备将按照您的要求，向您报告异常和故障信息
        </CnNormalP>

        <ProductFilesItem></ProductFilesItem>

        <a-spin spinning={state.spinning}>
          <div class='grid grid-cols-2 gap-y-20 gap-x-20'>
            {state.devList.map(item => (
              <AlarmConfigMsgCard
                devConfigData={item}
                onUpdateConfig={getDevsConfigList}
              ></AlarmConfigMsgCard>
            ))}
          </div>
        </a-spin>
      </div>
    )
  }
})
